//  out: ../css/
@import "./base";

@vw: 3.75vw;

header {
  width: 100%;
  height: (44 / @vw);
  background-color: #fff;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: (15 / @vw);
  position: fixed;
  top: 0;
  left: 0;
  img {
    width: (66 / @vw);
    height: (30 / @vw);
  }
  .nav {
    background-color: #fff;
    width: (160 / @vw);
    height: (44 / @vw);
    display: flex;
    justify-content: space-between;
    align-items: center;
    a {
      color: #cccccc;
      text-align: center;
      span {
        font-size: (20 / @vw);
        line-height: (40 / @vw);
      }
    }
    img {
      width: (26 / @vw);
      height: (26 / @vw);
    }
    p {
      font-size: (12.5 / @vw);
      width: (72 / @vw);
      height: (24 / @vw);
      color: #fff;
      background-color: #ff6699;
      border-radius: (5 / @vw);
      text-align: center;
      line-height: (24 / @vw);
    }
  }
}

// 导航栏
.nav-bar {
  background-color: #fff;
  z-index: 1;
  position: relative;
  width: 100%;
  height: (40 / @vw);
  margin-top: (40 / @vw);
  padding: 0 (15 / @vw);
  position: fixed;
  top: 0;
  left: 0;
  border-bottom: 1px solid #eee;
  ul {
    // width: 100%;
    display: flex;
    overflow-x: scroll; /* 如果内容超出宽度，显示水平滚动条 */
    white-space: nowrap; /* 使内容在同一行 */
    justify-content: space-between;
    align-items: center;
    &::-webkit-scrollbar {
        display: none; /* 隐藏滚动条 */
    }
    li {
      font-size: (14 / @vw);
      padding: (10 / @vw) 0;
      &:first-child {
        border-bottom: (2 / @vw) solid #fb7299;
        color: #fb7299;
      }
      margin-right: (32 / @vw);
    }
  }
  a {
    width: (40 / @vw);
    height: (22 / @vw);
    position: absolute;
    right: 0;
    top: (10 / @vw);
    background-color: #fff;
    text-align: center;
    span {
      font-size: (20 / @vw);
      line-height: (22 / @vw);
      color: #aaa;
    }
  }
}

// 主体内容
main {
  margin: 0 (10 / @vw);
  margin-top: (86 / @vw);
  ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    li {
      height: (150 / @vw);
      img {
        width: (172 / @vw);
        height: (97 / @vw);
      }
      .video {
        width: 100%;
        position: relative;
        .info {
          width: 100%;
          height: (28 / @vw);
          padding: 0 (5 / @vw);
          position: absolute;
          bottom: 0;
          display: flex;
          justify-content: space-between;
          align-items: center;
          background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), transparent);
          a {
            display: flex;
            font-size: (12 / @vw);
            color: #fff;
            span {
              font-size: (16 / @vw);
              margin-right: (5 / @vw);
            }
          }
        }
      }
      p {
        font-size: (12 / @vw);
        color: #212121;
        width: (170 / @vw);
        height: (32 / @vw);
        margin-top: (6 / @vw);
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box; /* 多行文本溢出显示省略号 */
        line-clamp: 2;  /* 显示两行文字 */
        -webkit-line-clamp: 2;  /* 显示两行文字 */
        -webkit-box-orient: vertical;  /* 垂直显示 */
      }
    }
  }
}

// 底部
footer {
  width: 100%;
  height: (37 / @vw);
  padding: 0 (15 / @vw);
  position: fixed;
  bottom: (30 / @vw);
  left: 0;
  div {
    padding: (5 / @vw) (15 / @vw);
    height: 100%;
    border-radius: (19 / @vw);
    background-color: #fb7299;
    color: #fff;
    font-size: (14 / @vw);
    text-align: center;
    a {
      color: #fff;
      margin: 0 (15 / @vw);
    }
    span {
      line-height: (22 / @vw);
    }
  }
}
